<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue快速入门</title>
  <script src="./js/vue.js"></script>
  <style>
    #a{
        width:592;  height: 397;
       background-image: url(123.png );
        
        border: 5px  solid  blanchedalmond;
        margin: 13% 32% 0% 32%;
    }

    h1{
        text-align:center;
        font-size: 30px;;
        color: black;
    }

  p{
    text-align:center;
  }

  #s{
    width: 100px;
    text-align:center;
  }
</style>
</head>


<body>
  
  </div> 
  <br>
  <div id="app"  >
  <table border="1px" width="500" cellspecing="0">
    <tr>
      <th>序号</th>
      <th>姓名</th>
      <th>年龄</th>
      <th>身份</th>
      <th>性别</th>
      <th>成绩</th>
    </tr>
    <tr align="center" v-for="(users,index) in users">
      <td>{{index+1}}</td>
      <td>{{users.name}}</td>
      <td>{{users.age}}</td>
      <td >
        <span v-if="users.age <= 18">未成年</span>
        <span v-else-if="users.age > 18 &&users.age<=30">青年</span>
        <span v-else-if="users.age > 30 && users.age<=50">中年</span>
        <span v-if="users.age > 50">老年</span>
      </td>
      
      <td>
        <span  v-if="users.gender==1">男</span>
        <span v-else="users.gender==2">女</span>
      </td>

       <td>
        <span v-show="users.score < 60">不及格</span>
        <span v-show="users.score >= 60 && users.score < 80">及格</span>
      <span v-show="users.score >= 80">优秀</span> 
       </td>
    </tr>
  </table>       
   </div> 
</body>


<script>
  new Vue({
    el:"#app",
    data: {
      users: [{
      name:"Tom",
      age: 20,
      gender: 1,
      score: 78},

    { name:"Rose",
      age: 18,
      gender: 2,
      score:86 },

    {name: "Jerry",
    age: 60,
    gender: 1,
    score: 90},

    {
    name:"Tony",
    age: 30,
    gender: 2,
    score: 52
    }]},
    methods: {
     gameover :function(){
    // var c=confrim("你确定要退出游戏嘛？");
     alert(c);
     }
    }
  })

</script>
</html>








